<template>
  <div
    id="app"
    class="w-bg-color"
    :class="{ tabbar: tabbar}">
    <router-view/>
    <!--tabbar-->
    <w-tab-bar/>
  </div>
</template>

<script>
  import WTabBar from './com/tabBar/index'
  import Config from '@/config/index'
  import { Loading } from 'vux'
  export default {
    name: 'App',
    components: {
      WTabBar,
      Loading
    },
    computed: {
      /**
       * 底部的tabBar高度
       * @returns {number}
       */
      tabbar() {
        return this.$route.meta.tabBar
      }
    },
    provide: function () {
      return {
        bgImage: this.bgImage
      }
    },
    methods: {
      bgImage (url, data = {}, defImg = true) {
        const retDara = {
          ...data
        }
        if (url) {
          retDara.backgroundImage = `url(${url})`
        } else if (defImg) {
          retDara.backgroundImage = `url(${Config.defaultImage})`
        }
        return retDara
      }
    }
  }
</script>

<style lang="scss">

  #app {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    padding-top: 46px;
    min-height: 100vh;
    box-sizing: border-box;
  }

  .tabbar {
    padding-bottom: 49px;
  }

</style>
